<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.css" />
  <style>
    body{
      padding: 10px;
    }
    #app th,
    #app td {
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="panel panel-primary">
      <div class="panel-heading">图书管理---共 {{total}} 本书</div>
      <div class="panel-body">
        <div class="row">
          <div class="col-lg-3">
            <input v-focus :disabled="flag" type="text" class="form-control" placeholder="编号" v-model="id" />
          </div>
          <div class="col-lg-3">
            <input type="text" class="form-control" placeholder="书籍名称" v-model="bookname" />
          </div>
          <div class="col-lg-1">
            <div class="input-group">
              <input :disabled="flagSub" type="button" class="form-control btn-primary" value="提交" @click="submitbookFn" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <table class="table table-bordered">
      <tr>
        <th>编号</th>
        <th>书名</th>
        <th>日期</th>
        <th>操作</th>
      </tr>
      <tr v-for="item in list" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.bookname}}</td>
        <td>{{item.date | dateF}}</td>
        <td>
          <button class="btn btn-primary" @click="editFn(item.id)">编辑</button>
          <button class="btn btn-danger" @click="deleteFn(item.id)">删除</button>
        </td>
      </tr>
    </table>
  </div>
  <script src="./vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        flag: false,
        flagSub: false,
        id: '',
        bookname: '',
        list: []
      },
      methods: {
        submitbookFn() {
          if(this.flag === true) {  // 编辑
            this.flag = false
            this.list.map(item => {
              if(item.id === this.id) {
                item.bookname = this.bookname
              }
              return item
            })
          } else {  // 添加
            let obj = {
              id: this.id,
              bookname: this.bookname,
              date: new Date()
            }
            this.list.push(obj)
          }
          this.id = ''
          this.bookname = ''
        },
        editFn(id) {
          this.flag = true

          // 过滤符合条件的数据
          const arr = this.list.filter(item => {
            return item.id === id
          })
          const obj = arr[0]  // 获取对象
          const {bookname, id: bookid, date} = obj  // 对象结构， 获取 id，bookname，date
          this.bookname = bookname  // 修改js数据， 更新页面
          this.id = bookid

        },
        deleteFn(id) {
          this.list = this.list.filter(item => {
            return item.id !== id
          })
        }
      },
      filters: {
        dateF(res) {
          const date = new Date(res)
          return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
        }
      },
      directives: {
        focus: {
          inserted(el) {
            el.focus()
          }
        }
      },
      computed: {
        total() {
          return this.list.length
        }
      },
      watch: {
        bookname(newVal, oldVal) {
          let flag = this.list.some(item => {
            return item.bookname === newVal
          })
          if(flag) {
            this.flagSub = true
          } else {
            this.flagSub = false
          }
        }
      },
      mounted() {  // 获取页面数据
        const list = [
          { id: 1, bookname: '金瓶梅', date: new Date() },
          { id: 2, bookname: '明朝那些事', date: new Date() },
          { id: 3, bookname: '武则天的后宫', date: new Date() }
        ]

        this.list = list
      }
    })
  </script>
</body>
</html>